<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../ajax/jquery-3.4.1.min.js"></script>
    <style>
        #or {
            width: 500px;
            height: 700px;
            background-color: aqua;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        div {
            margin: 30px;
        }

        input {
            width: 300px;
            height: 30px;
        }
    </style>
</head>

<body>
    <table class="ds">
        <tr>
            <td>商品id</td>
            <td>商品照片</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品创建时间</td>
            <td>商品库存</td>
            <td>商品详情</td>
            <td>编辑</td>
        </tr>
    </table>
    <div id="or">
        <div>商品照片:<input type="text" id="goodsPhoto"></div>
        <div>商品名称:<input type="text" id="goodsName"></div>
        <div>商品价格:<input type="text" id="goodsPrice"></div>
        <div>商品创建时间:<input type="text" id="goodsCreationTime"></div>
        <div>商品库存:<input type="text" id="goodsInventory"></div>
        <div>商品详情:<input type="text" id="goodSdetail"></div>
        <button class="use" onclick="kw1()">添加商品</button>
    </div>
    <script>
        var kawei = document.getElementsByClassName("ds")[0];
        var dl = document.getElementById("or");
        (function () {
            dl.hidden = true;
        }())
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            success: function (ate) {
                var ayda = ate.data;
                ayda.forEach(ele => {
                    let a = "";
                    a = `
                    <tr>
            <td>${ele.goodsId}</td>
            <td>${ele.goodsPhoto}</td>
            <td>${ele.goodsName}</td>
            <td>${ele.goodsPrice}</td>
            <td>${ele.goodsCreationTime}</td>
            <td>${ele.goodsInventory}</td>
            <td>${ele.goodSdetail}</td>
            <td>
                <button class:"mas"  >新增</button>
                <button class:"mes" onclick="kw(${ele.goodsId})">删除</button>
            </td>
        </tr>
        `
                    $(".ds").append(a);
                });
            }
        })
        function kw(www) {
            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "get",
                data: {
                    id: www
                },
                success: function (pp) {
                    console.log(pp);
                }
            })
            location.reload()
        }
        function kw1() {
            console.log($ ("#goodsPhoto").val());
            
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "get",
                data: {
                    goodsPhoto: $ ("#goodsPhoto").val(),
                    goodsName: $ ("#goodsName").val(),
                    goodsPrice: $ ("#goodsPrice").val(),
                    goodsCreationTime: $ ("#goodsCreationTime").val(),
                    goodsInventory: $ ("#goodsInventory").val(),
                    goodSdetail: $ ("#goodSdetail").val()
                },
                success:function (aaaaa){
                    console.log(aaaaa);
                    
                }
            })
        }
    </script>
</body>

</html>